<script>
  export default {
    name: 'FormBlockOld',
    inject: ['store'],
    props: {
      blockTitle: String
    },
    data() {
      return {
        config: {
          title: '',
          index: -1
        }
      }
    },
    mounted() {
      const { children } = this.$parent.$refs.scroller || this.$parent.$el
      const index = [].indexOf.call(children, this.$el)
      this.config = { title: this.blockTitle, index }
      this.store.tabs.push(this.config)
      this.store.tabs.sort((a, b) => a.index - b.index)
    },
    destroyed() {
      this.store.tabs.splice(this.store.tabs.indexOf(this.config), 1)
      this.store.tabs.sort((a, b) => a.index - b.index)
    },
    render() {
      return (
        <div class="form-block">
          <p class="form-block-title">{this.blockTitle}</p>
          {this.$slots.default}
        </div>
      )
    }
  }
</script>

<style lang="scss">
  .form-block {
    background-color: #fff;
  }

  .form-block-title {
    margin: 0 0 10px;
    padding: 10px;
    color: black;
    font-weight: bold;
  }
</style>
